<!DOCTYPE HTML>
<html>
<head>
    <title>个人网站</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="description" content="赵彬鸿（Hovace Zhao）的个人网站主页。我是一个24岁的it Boy，我  一直在前行。"/>
    <meta name="keywords" content="赵彬鸿, Hovace Zhao"/>
    <meta name="author" content="Hovace Zhao"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta property="og:title" content="赵彬鸿 · Hovace Zhao"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://www.hovace.me/"/>
    <meta property="og:image"
          content="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/>
    <meta property="og:description" content="我是一个 24 岁的 IT Boy，我有梦想，一直在前行。"/>
    <meta property="og:locale" content="zh-CN"/>
    <meta property="og:locale:alternate" content="en-US"/>
    <meta property="og:site_name" content="赵彬鸿的个人主页"/>
    <meta name="weibo:webpage:create_at" content="2018-01-05 06:00:00"/>
    <meta name="weibo:webpage:update_at" content="2018-01-05 06:00:00"/>
    <link rel="apple-touch-icon-precomposed"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/>
    <link rel="shortcut icon"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/124"/>
    <link rel="icon"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/60"/>
    <link rel="apple-touch-icon"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <link rel="apple-touch-icon" sizes="72x72"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/72">
    <link rel="apple-touch-icon" sizes="114x114"
          href="http://upload-images.jianshu.io/upload_images/1248565-cdb0619a00308d08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/114">

    <link rel="stylesheet" href="assets/css/main.css"/>
    <noscript>
        <link rel="stylesheet" href="assets/css/noscript.css"/>
    </noscript>
</head>
<body>

<!-- Page Wrapper -->
<div id="page-wrapper">

    <!-- Wrapper -->
    <div id="wrapper">

        <!-- Panel (Banner) -->
        <section class="panel banner right">
            <div class="content color0 span-3-75">
                <h1 class="major">
                    <!--[-->Hello, my name<!--]-->
                    <br/>
                    <!--[-->is Hovace<!--]--></h1>
                <p>
                    <!--[-->一个 90后 IT<strong>民工</strong>！15年从搬砖和泥的工作中走出来，走上了前端之路。
                    <br>
                    人生就是一个得与失的过程，而我却是一个幸运者，得到的永远比失去的多。
                </p>
                <ul class="actions">
                    <li><a href="#first" class="button special color1 circle icon fa-angle-right">Next</a></li>
                </ul>
            </div>
            <div class="image filtered span-1-75" data-position="15% 25%">
                <img src="images/nine-two.jpg" alt=""/>
            </div>
        </section>

        <!-- Panel (Spotlight) -->
        <section class="panel spotlight medium right" id="first">
            <div class="content span-7">
                <h2 class="major">探索实践</h2>
                <p>关于一个WEB前端的职业规划，其实是有各种的答案，没有哪种答案是完全正确的，全凭自己的选择，只要是自己选定了，坚持去认真走就好。但是，任何规划和目标的实现都依赖于知识的积累，而知识的积累来源于学习及学习后大量的实践。</p>
            </div>
            <div class="image filtered tinted" data-position="top left">
                <img src="images/pic02.jpg" alt=""/>
            </div>
        </section>

        <!-- Panel -->
        <section class="panel color1">
            <div class="intro joined">
                <h2 class="major">职业规划</h2>
                <p>
                    1~2 吸吸吸，疯狂的吸取知识
                    <br>
                    3~4 大大大，扩展知识面
                    <br>
                    5~ 摸摸摸，摸清前方的路

                </p>
            </div>
            <div class="inner">
                <ul class="grid-icons three connected">
                    <li><span class="icon fa-diamond"><span class="label">Lorem</span></span></li>
                    <li><span class="icon fa-camera-retro"><span class="label">Ipsum</span></span></li>
                    <li><span class="icon fa-cog"><span class="label">Dolor</span></span></li>
                    <li><span class="icon fa-paper-plane"><span class="label">Sit</span></span></li>
                    <li><span class="icon fa-bar-chart"><span class="label">Amet</span></span></li>
                    <li><span class="icon fa-code"><span class="label">Nullam</span></span></li>
                </ul>
            </div>
        </section>

        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left">
            <div class="content span-5">
                <h2 class="major">技术 or 管理</h2>
                <p>技术 or 管理，这里没有对错之分，只有合不合适。有的人就不善于交流，同时喜欢专研，可以继续走技术的路，发展成专家；有的人则可能有比较强的领导力，可以带领一群人完成项目，那可以转向管理，成为Team Leader等</p>
            </div>
            <div class="image filtered tinted" data-position="top right">
                <img src="images/pic03.jpg" alt=""/>
            </div>
        </section>

        <!-- Panel -->
        <section class="panel">
            <div class="intro color2">
                <h2 class="major">渴望</h2>
                <p>注意，我放在第一位的，不是对技术的渴望，而是，[对自己产品的渴望]。就像一个男人，渴望要一个自己的孩子，99%会选择走“谈对象、结婚、做爱、生娃、养娃”这样一条路。作为一个工程师，如果你对产品的渴望就像那些思子若狂见了人家孩子就想抱走的男人或女人，那你就可能会愿意成为全栈工程师</p>
            </div>
            <div class="gallery">
                <div class="group span-3">
                    <a href="images/gallery/fulls/01.jpg" class="image filtered span-3" data-position="bottom"><img
                            src="images/gallery/thumbs/greg-rakozy-129733.jpg" alt=""/></a>
                    <a href="images/gallery/fulls/02.jpg" class="image filtered span-1-5" data-position="center"><img
                            src="images/gallery/thumbs/giu-vicente-353330.jpg" alt=""/></a>
                    <a href="images/gallery/fulls/03.jpg" class="image filtered span-1-5" data-position="bottom"><img
                            src="images/gallery/thumbs/aral-tasher-393518.jpg" alt=""/></a>
                </div>
                <!--<a href="images/gallery/fulls/04.jpg" class="image filtered span-2-5" data-position="top"><img-->
                        <!--src="images/gallery/thumbs/04.jpg" alt=""/></a>-->
                <!--<div class="group span-4-5">-->
                    <!--<a href="images/gallery/fulls/05.jpg" class="image filtered span-3" data-position="top"><img-->
                            <!--src="images/gallery/thumbs/05.jpg" alt=""/></a>-->
                    <!--<a href="images/gallery/fulls/06.jpg" class="image filtered span-1-5" data-position="center"><img-->
                            <!--src="images/gallery/thumbs/06.jpg" alt=""/></a>-->
                    <!--<a href="images/gallery/fulls/07.jpg" class="image filtered span-1-5" data-position="bottom"><img-->
                            <!--src="images/gallery/thumbs/07.jpg" alt=""/></a>-->
                    <!--<a href="images/gallery/fulls/08.jpg" class="image filtered span-3" data-position="top"><img-->
                            <!--src="images/gallery/thumbs/08.jpg" alt=""/></a>-->
                <!--</div>-->
                <!--<a href="images/gallery/fulls/09.jpg" class="image filtered span-2-5" data-position="right"><img-->
                        <!--src="images/gallery/thumbs/09.jpg" alt=""/></a>-->
            </div>
        </section>

        <!-- Panel -->
        <section class="panel color4-alt">
            <div class="intro color4">
                <h2 class="major">个人说明</h2>
                <p>性格开朗，工作认真负责，细心，有很强的职责心和进取心,头脑灵活，不怕吃苦，理解潜力强，能够很好的处理同事的关系，具有强烈的团队合作精神，并能承担必须的工作压力</p>
            </div>
            <div class="inner columns divided">
                <div class="span-3-25">
                    <form method="post" action="#">
                        <div class="field half">
                            <label for="name">名字</label>
                            <input type="text" name="name" id="name" placeholder="你的名字"/>
                        </div>
                        <div class="field half">
                            <label for="email">E-mail</label>
                            <input type="email" name="email" id="email" placeholder="xxx@xx.com"/>
                        </div>
                        <div class="field">
                            <label for="message">信息</label>
                            <textarea name="message" id="message" placeholder="请写下您想说的话" rows="4"></textarea>
                        </div>
                        <ul class="actions">
                            <li><input type="submit" value="发送给我" class="button special"/></li>
                        </ul>
                    </form>
                </div>
                <div class="span-1-5">
                    <ul class="contact-icons color1">
                        <li class="icon fa-volume-control-phone"><a href="#">15100413454</a></li>
                        <li class="icon fa-facebook"><a href="#">facebook.com/Hovace Zhao</a></li>
                        <li class="icon fa-qq"><a href="#">634556153</a></li>
                        <li class="icon fa-code"><a href="#">www.hovace.me</a></li>
                        <li class="icon fa-map-pin"><a href="#">北京市 朝阳区</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <div class="copyrights">2018 © <a href="www.Hovace.me">Hovace</a></div>

        <!-- Panel -->
        <!--<section class="panel color2-alt">-->
        <!--<div class="intro color2">-->
        <!--<h2 class="major">Elements</h2>-->
        <!--<p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat-->
        <!--finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna-->
        <!--etiam. </p>-->
        <!--</div>-->
        <!--<div class="inner columns aligned">-->
        <!--<div class="span-2-75">-->

        <!--<h3 class="major">Text</h3>-->
        <!--<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.-->
        <!--This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.-->
        <!--This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this-->
        <!--is a link</a>.</p>-->

        <!--<h1>Heading Level 1</h1>-->
        <!--<h2>Heading Level 2</h2>-->
        <!--<h3>Heading Level 3</h3>-->
        <!--<h4>Heading Level 4</h4>-->
        <!--<h5>Heading Level 5</h5>-->
        <!--<h6>Heading Level 6</h6>-->

        <!--</div>-->
        <!--<div class="span-3">-->

        <!--<h4>Blockquote</h4>-->
        <!--<blockquote>Lorem ipsum dolor sit amet. Felis sagittis eget tempus euismod. Vestibulum ante ipsum-->
        <!--primis in vestibulum. Blandit adipiscing eu iaculis volutpat ac adipiscing volutpat ac-->
        <!--adipiscing faucibus.-->
        <!--</blockquote>-->

        <!--<h4>Preformatted</h4>-->
        <!--<pre><code>i = 0;-->

        <!--while (!deck.isInOrder()) {-->
        <!--print 'Iteration ' + (i++);-->
        <!--deck.shuffle();-->
        <!--}-->

        <!--print 'It took ' + i + ' iterations to sort the deck.';</code></pre>-->

        <!--</div>-->
        <!--<div class="span-1-25">-->

        <!--<h3 class="major">Lists</h3>-->

        <!--<h4>Unordered</h4>-->
        <!--<ul>-->
        <!--<li>Lorem ipsum dolor sit.</li>-->
        <!--<li>Dolor pulvinar etiam.</li>-->
        <!--<li>Etiam vel felis viverra.</li>-->
        <!--</ul>-->

        <!--<h4>Alternate</h4>-->
        <!--<ul class="alt">-->
        <!--<li>Lorem ipsum dolor sit.</li>-->
        <!--<li>Dolor pulvinar etiam.</li>-->
        <!--<li>Etiam vel felis viverra.</li>-->
        <!--<li>Felis enim feugiat.</li>-->
        <!--</ul>-->

        <!--</div>-->
        <!--<div class="span-1-5">-->

        <!--<h4>Ordered</h4>-->
        <!--<ol>-->
        <!--<li>Lorem ipsum dolor sit.</li>-->
        <!--<li>Dolor pulvinar etiam.</li>-->
        <!--<li>Etiam vel felis viverra.</li>-->
        <!--<li>Felis enim feugiat.</li>-->
        <!--<li>Etiam vel felis lorem.</li>-->
        <!--</ol>-->

        <!--<h4>Actions</h4>-->
        <!--<ul class="actions">-->
        <!--<li><a href="#" class="button special color2">Default</a></li>-->
        <!--<li><a href="#" class="button">Default</a></li>-->
        <!--</ul>-->
        <!--<ul class="actions vertical">-->
        <!--<li><a href="#" class="button special color2">Default</a></li>-->
        <!--<li><a href="#" class="button">Default</a></li>-->
        <!--</ul>-->

        <!--</div>-->
        <!--<div class="span-1-25">-->

        <!--<h4>Icons</h4>-->
        <!--<ul class="icons">-->
        <!--<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>-->
        <!--<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>-->
        <!--<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>-->
        <!--<li><a href="#" class="icon fa-github"><span class="label">GitHub</span></a></li>-->
        <!--<li><a href="#" class="icon fa-medium"><span class="label">Medium</span></a></li>-->
        <!--</ul>-->

        <!--<h4>Contact Icons</h4>-->
        <!--<ul class="contact-icons color2">-->
        <!--<li class="icon fa-twitter"><a href="#">Twitter</a></li>-->
        <!--<li class="icon fa-facebook"><a href="#">Facebook</a></li>-->
        <!--<li class="icon fa-instagram"><a href="#">Instagram</a></li>-->
        <!--<li class="icon fa-github"><a href="#">GitHub</a></li>-->
        <!--<li class="icon fa-medium"><a href="#">Medium</a></li>-->
        <!--</ul>-->

        <!--</div>-->
        <!--<div class="span-3">-->
        <!--<h3 class="major">Table</h3>-->
        <!--<h4>Default</h4>-->
        <!--<div class="table-wrapper">-->
        <!--<table>-->
        <!--<thead>-->
        <!--<tr>-->
        <!--<th>Name</th>-->
        <!--<th>Description</th>-->
        <!--<th>Price</th>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr>-->
        <!--<td>Item One</td>-->
        <!--<td>Ante turpis integer aliquet porttitor.</td>-->
        <!--<td>29.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Two</td>-->
        <!--<td>Vis ac commodo adipiscing arcu aliquet.</td>-->
        <!--<td>19.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Three</td>-->
        <!--<td> Morbi faucibus arcu accumsan lorem.</td>-->
        <!--<td>29.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Four</td>-->
        <!--<td>Vitae integer tempus condimentum.</td>-->
        <!--<td>19.99</td>-->
        <!--</tr>-->
        <!--</tbody>-->
        <!--<tfoot>-->
        <!--<tr>-->
        <!--<td colspan="2"></td>-->
        <!--<td>100.00</td>-->
        <!--</tr>-->
        <!--</tfoot>-->
        <!--</table>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="span-3">-->
        <!--<h4>Alternate</h4>-->
        <!--<div class="table-wrapper">-->
        <!--<table class="alt">-->
        <!--<thead>-->
        <!--<tr>-->
        <!--<th>Name</th>-->
        <!--<th>Description</th>-->
        <!--<th>Price</th>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr>-->
        <!--<td>Item One</td>-->
        <!--<td>Ante turpis integer aliquet porttitor.</td>-->
        <!--<td>29.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Two</td>-->
        <!--<td>Vis ac commodo adipiscing arcu aliquet.</td>-->
        <!--<td>19.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Three</td>-->
        <!--<td> Morbi faucibus arcu accumsan lorem.</td>-->
        <!--<td>29.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Four</td>-->
        <!--<td>Vitae integer tempus condimentum.</td>-->
        <!--<td>19.99</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td>Item Five</td>-->
        <!--<td>Ante turpis integer aliquet porttitor.</td>-->
        <!--<td>29.99</td>-->
        <!--</tr>-->
        <!--</tbody>-->
        <!--<tfoot>-->
        <!--<tr>-->
        <!--<td colspan="2"></td>-->
        <!--<td>100.00</td>-->
        <!--</tr>-->
        <!--</tfoot>-->
        <!--</table>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="span-2-25">-->
        <!--<h3 class="major">Buttons</h3>-->
        <!--<ul class="actions">-->
        <!--<li><a href="#" class="button special color2">Special</a></li>-->
        <!--<li><a href="#" class="button">Default</a></li>-->
        <!--</ul>-->
        <!--<ul class="actions">-->
        <!--<li><a href="#" class="button">Default</a></li>-->
        <!--<li><a href="#" class="button large">Large</a></li>-->
        <!--<li><a href="#" class="button small">Small</a></li>-->
        <!--</ul>-->
        <!--<ul class="actions">-->
        <!--<li><a href="#" class="button special color2 icon fa-cog">Icon</a></li>-->
        <!--<li><a href="#" class="button icon fa-diamond">Icon</a></li>-->
        <!--</ul>-->
        <!--<ul class="actions">-->
        <!--<li><span class="button special color2 disabled">Disabled</span></li>-->
        <!--<li><span class="button disabled">Disabled</span></li>-->
        <!--</ul>-->
        <!--<ul class="actions">-->
        <!--<li><a href="#" class="button special color2 circle icon fa-cog">Icon</a></li>-->
        <!--<li><a href="#" class="button circle icon fa-diamond">Icon</a></li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--<div class="span-4-5">-->
        <!--<h3 class="major">Form</h3>-->
        <!--<form method="post" action="#">-->
        <!--<div class="field third">-->
        <!--<label for="demo-name">名字</label>-->
        <!--<input type="text" name="demo-name" id="demo-name" placeholder="你的名字"/>-->
        <!--</div>-->
        <!--<div class="field third">-->
        <!--<label for="demo-email">Email</label>-->
        <!--<input type="email" name="demo-email" id="demo-email" value=""-->
        <!--placeholder="jane@untitled.tld"/>-->
        <!--</div>-->
        <!--<div class="field third">-->
        <!--<label for="demo-category">Category</label>-->
        <!--<div class="select-wrapper">-->
        <!--<select name="demo-category" id="demo-category">-->
        <!--<option value="">-</option>-->
        <!--<option value="1">Manufacturing</option>-->
        <!--<option value="1">Shipping</option>-->
        <!--<option value="1">Administration</option>-->
        <!--<option value="1">Human Resources</option>-->
        <!--</select>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="field quarter">-->
        <!--<input type="radio" id="demo-priority-low" name="demo-priority" class="color2" checked/>-->
        <!--<label for="demo-priority-low">Low Priority</label>-->
        <!--</div>-->
        <!--<div class="field quarter">-->
        <!--<input type="radio" id="demo-priority-high" name="demo-priority" class="color2"/>-->
        <!--<label for="demo-priority-high">High Priority</label>-->
        <!--</div>-->
        <!--<div class="field quarter">-->
        <!--<input type="checkbox" id="demo-copy" name="demo-copy" class="color2"/>-->
        <!--<label for="demo-copy">Email a copy</label>-->
        <!--</div>-->
        <!--<div class="field quarter">-->
        <!--<input type="checkbox" id="demo-human" name="demo-human" class="color2" checked/>-->
        <!--<label for="demo-human">Not a robot</label>-->
        <!--</div>-->
        <!--<div class="field">-->
        <!--<label for="demo-message">Message</label>-->
        <!--<textarea name="demo-message" id="demo-message" placeholder="Enter your message"-->
        <!--rows="2"></textarea>-->
        <!--</div>-->
        <!--<ul class="actions">-->
        <!--<li><input type="submit" value="Send Message" class="special color2"/></li>-->
        <!--<li><input type="reset" value="Reset"/></li>-->
        <!--</ul>-->
        <!--</form>-->
        <!--</div>-->
        <!--</div>-->
        <!--</section>-->

        <!-- Copyright -->
        <div class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>

    </div>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/main.js"></script>

</body>
</html>